
<template>
<div class="ui_base">  
  <h3>
  🚀🚀 基础组件🚀🚀
  </h3>
  <div class="t_bar">
 <TBar></TBar>
  </div>
  <div class="t_icon">
  <TIcon></TIcon>
  </div>
  <div class="t_slider">
  <TSlider width='200px'></TSlider>
  </div>
  <div class="t_select">
    <TSelect></TSelect>
   </div>
  <div class="t_chilp">
    <transition name="chip">
      <TChip size='mini' v-bind='chilpProps' v-if="isShowChip" ></TChip>
    </transition>
  </div>
     <div class="t_form">
   <TForm></TForm>
   </div>
   <div class="t_switch">
    <TSwitch></TSwitch>
   </div>
   <div class="t_radio">
  <TRadio></TRadio>
   </div>
  <TAvatar></TAvatar>
  <TCheckbox></TCheckbox>
  <TCircle></TCircle>
  <div class="T_button">
    <TButton type='info' @click="setMessageInfo"></TButton>
    <TButton type='info'  @click="setMessageInfo" size='mini' content='mini'></TButton>
    <TButton type='success'  @click="setMessageSuccess"></TButton>
    <TButton type='success'  @click="setMessageSuccess" size='mini' content='mini'></TButton>
    <TButton type='warn'  @click="setMessageWarn"></TButton>
    <TButton type='warn'  @click="setMessageWarn" size='mini' content='mini'></TButton>
    <TButton type='danger'  @click="setMessageDanger"></TButton>
    <TButton type='danger' @click="setMessageDanger" size='mini' content='mini'></TButton>
   </div>

   </div>




  <div class="t_click">
 <TClick></TClick>
  </div>     

</template>
<script setup lang="ts">
import {ref } from 'vue'
import TSelect from '../packages/TSelect/src/TSelect.vue'
import TBar from '../packages/TBar/src/TBar.vue'
import TIcon from '../packages/TIcon/src/TIcon.vue'
import TSlider from '../packages/TSlider/src/TSlider.vue'
import TChip from '../packages/TChip/src/TChip.vue'
import TForm from '../packages/TForm/src/TForm.vue'
import TSwitch from '../packages/TSwitch/src/TSwitch.vue'
import TRadio from '../packages/TRadio/src/TRadio.vue'
import TAvatar from '../packages/TAvatar/src/TAvatar.vue'
import TCheckbox from '../packages/TCheckbox/src/TCheckbox.vue'
import TCircle from '../packages/TCircle/src/TCircle.vue'
import TButton from '../packages/TButton/src/TButton.vue'
import TClick from '../packages/TClick/src/TClick.vue'
const isShowChip = ref(true)
const chilpProps = ref({
  message: 'Info Neumorphic',
  type: 'Info'
})

const setMessageInfo = ()=>{
chilpProps.value.message = 'Info Neumorphic '
chilpProps.value.type= 'Info'
isShowChip.value = !isShowChip.value
}

const setMessageWarn = ()=>{
  
chilpProps.value.message = 'warn Neumorphic '
chilpProps.value.type= 'warn'
isShowChip.value = !isShowChip.value
}
const setMessageSuccess = ()=>{
chilpProps.value.message = 'success Neumorphic '
chilpProps.value.type= 'success'
isShowChip.value = !isShowChip.value
}

const setMessageDanger = ()=>{
  
 chilpProps.value.message = 'danger Neumorphic '
chilpProps.value.type= 'danger'
isShowChip.value = !isShowChip.value
}


</script>

<style lang="less" scoped>
.ui_base{
  margin-top: -18px;
  background-color: rgb(255, 228, 198);
}
.t_chilp{
  margin-top: 50px;
}
.t_select{
  margin-left: 850px;
  display: inline-block;
}
.t_click{
  // margin-left: 100px;
  width: 100%;
  height: 350px;
  background-image: linear-gradient(#4C2B76,#9B3579,#D7516E,#FB825E,#FFBC57,
#F9F871
);
  z-index: 99;
}
.t_form{
  margin-top: 80px;
  margin-left: 1300px;
}
.t_icon{
  margin-top: -60px;
  margin-left: 1350px;
}
.t_switch{
  margin-left: 900px;
}
.t_radio{
  margin-left: 500px;
}
.t_slider{
  margin-top: 30px;
}
.t_bar{
  margin-top: -15px;
  margin-left: 500px;
}
.T_button{
  margin-top: -450px;
 .btn{
   display: flex;
   margin-top: 20px;
   margin-left: 200px;
 }
}
.chip-enter-active {
  animation: bounceInDown 0.8s ease;
}
.chip-leave-active {
  animation: zoomOutUp 0.8s ease;
}
</style> 
